<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="热文"  :isAppBtn="false" :isHome="!isApp">
			<view slot="right" class="font30 lh44 opacity80 action-text" @click="actionTap">
				我的文章
			</view>
		</HeadCustom>
		<HeadMore :show.sync="isAction" :list="actionList" @action="actionTap" />
		<!-- <view class="banner fboxCol Ycenter">
			<swiper class="swiper-banner" :indicator-dots="true" :autoplay="true" indicator-color="rgba(255,255,255,0.2)" indicator-active-color="#FFFEFD" circular :current="swiperIndex" @change="swiperChange">
				<swiper-item class="pic" v-for="(item, index) in bannerList" :key="index" @click="goPage(item)">
					{{item}}
				</swiper-item>
			</swiper>
		</view> -->
		<view class="list">
			<view class="hd fboxRow Ycenter">
				<view class="flex1 bg-1A1D25">
				<!-- <view class="flex1 bg-1A1D25" :class="[(scrollTop / 2) >= dynamicTop ? ' fixed-dynamic-nav' : '']"> -->
					<view class="flex1">
						<u-tabs :list="navList" @change="navChange" :current="navIndex" keyName="categoryName" itemStyle="height:88rpx"
							lineWidth="30" lineColor="#E8CDA7" :activeStyle="{
								color: '#E8CDA7',
								fontWeight: 700,
								fontSize: '32rpx'
							}" :inactiveStyle="{color: '#6B707C',fontSize: '30rpx'}">
						</u-tabs>
					</view>
				</view>
			</view>
			<view class="bd">
				<view v-for="(item, index) in listData" :key="index">
					<ArticleItem :innerData="item" />
				</view>
				<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
			</view>
		</view>
		<not-login ref="notLogin" />
	</view>
</template>

<script>
	import ArticleItem from './components/article-item.vue'
	import HeadMore from '@/components/head-custom/head-more.vue';
	import { getRequest } from '@/static/js/common.js';
	import { utf8to16, base64decode} from '@/static/js/Base64.js';
	import {hotCategory, hotList} from '@/api/h5.js';
	export default {
		components: {ArticleItem, HeadMore},
		name: 'aricleList',
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				isAction: false,
				actionList:[
					{label: '我引用的文章', value: 1, icon: 'bw-lianjie'}
				],
				navIndex: 0,
				navList: [],
				swiperIndex: 0,
				bannerList: [ 1,2,3],
				listData: [],
				listConfig: {
					current: 1,
					size: 10,
					count: 0,
					loading: 'loadmore'
				},
				isApp: true,
				ifOnShow: false
			}
		},
		onLoad(option) {
			if(option && option.benwu){
				let benwu = utf8to16(base64decode(option.benwu))
				this.benwu = option.benwu
				const token = {
					access_token: getRequest(benwu,'token'),
					companyId: getRequest(benwu,'companyId'),
					statusBarHeight: getRequest(benwu,'statusBarHeight'),
					authStatus: getRequest(benwu,'authStatus'),
				}
				getApp().globalData.statusBarHeight = token.statusBarHeight
				getApp().globalData.companyId = token.companyId
				this.companyId = token.companyId
				uni.setStorageSync('bw_params', JSON.stringify(token));
			}
			this.getMenu()
			if(option && option.isApp){
				this.isApp = option.isApp == 1 ? true : false
			}else{
				const {bw_link} = getApp().getBWData(['bw_link'])
				this.isApp = bw_link.isApp == 1 ? true : false
			}
			console.log('onLoad -----hotList----- hotArtcile')
		},
		onShow() {
			console.log('onShow ----- hotList ----- hotArtcile')
		},
		onHide() {
			console.log('onHide ---------- hotArtcile')
		},
		onUnload() {
			console.log('onUnload ----- hotList  ----- hotArtcile')
		},
		methods: {
			getMenu(){
				hotCategory().then(res=>{
					this.navList = res.data
					this.getInit()
					this.getList()
				}).catch(err=>{
					if(err.code == 401006){
						this.$refs.notLogin.openLogin({
							show: true,
							position: 'center'
						})
					}
				})
			},
			actionTap(e){
				this.$pageTo('/hotArticle/hotMine')
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			navChange(val) {
				this.navIndex = val.index
				this.getInit()
				this.getList()
			},
			getInit(){
				this.listConfig = {
					current: 1,
					size: 10,
					count: 0,
					loading: 'loadmore'
				}
				this.listData = []
			},
			getList(){
				hotList({
					cid: this.navList[this.navIndex].id,
					current: this.listConfig.current,
					size: this.listConfig.size
				}).then(res=>{
					if (this.listData.length) {
						this.listData = this.listData.concat(res.data.list)
					} else {
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			listLoading(res) {
				if (res.data.total == 0) {
					this.listConfig.loading = 'list-not'
				} else if (res.data.total < res.data.size || res.data.current * res.data.size >= res.data.total) {
					this.listConfig.loading = 'nomore'
				}
				this.listConfig.count = res.data.total
			},
			listMore() {
				const {
					current,
					size,
					count,
					loading
				} = this.listConfig
				if (loading == 'nomore') {
					return
				}
				if (current * size < count) {
					this.listConfig.current = current + 1
					this.getList()
				} else {
					this.listConfig.loading = 'nomore'
				}
			},
			
		},
		onReachBottom() {
			this.listMore()
		},
		onPullDownRefresh() {
			this.getInit()
			this.getList()
			uni.stopPullDownRefresh(); //停止刷新
		},
	}
</script>

<style lang="scss" scoped>
.banner {width: 750rpx;}
.swiper-banner {width: 702rpx;height: 236rpx;background-color: #7356FA;}
.list{}
.list .bd{padding: 40rpx 24rpx 24rpx;}
.action-text{padding-left: 20rpx;}
</style>